//边距类型
$spacing-types: (
  "m": margin,
  "p": padding
);

//边距方向
$spacing-directions: (
  t: top,
  l: left,
  r: right,
  b: bottom
);

//边距尺寸
$spacing-base-size: 1rem;
$spacing-sizes: (
  1: 0.03,
  2: 0.1,
  3: 0.15,
  4: 0.2,
  5: 0.24,
  6: 0.25,
  7: 0.28,
  8: 0.3,
  9: 0.32,
  10: 0.34,
  11: 0.35,
  12: 0.39,
  13: 0.4,
  14: 0.6,
  15: 0.9
);

@each $typeKey, $type in $spacing-types {
  /**
    .m-d1 {
      margin: .1rem;
    }
  */
  @each $sizeKey, $size in $spacing-sizes {
    .space-#{$typeKey}-#{$sizeKey} {
      #{$type}: $size * $spacing-base-size;
    }
  }

  /*
  左右边距
  .mx-d1 {
    margin-left: .1rem;
    margin-right: .1rem;
  }
  */
  @each $sizeKey, $size in $spacing-sizes {
    .space-#{$typeKey}x-#{$sizeKey} {
      #{$type}-left: $size * $spacing-base-size;
      #{$type}-right: $size * $spacing-base-size;
    }
  }

  /*
  上下边距
  .my-d1 {
    margin-top: .1rem;
    margin-bottom: .1rem;
  }
  */
  @each $sizeKey, $size in $spacing-sizes {
    .space-#{$typeKey}y-#{$sizeKey} {
      #{$type}-top: $size * $spacing-base-size;
      #{$type}-bottom: $size * $spacing-base-size;
    }
  }

  /*
  .mt-d1 {
    margin-top: .1rem;
  }
  */
  @each $directionKey, $direction in $spacing-directions {
    @each $sizeKey, $size in $spacing-sizes {
      .space-#{$typeKey}#{$directionKey}-#{$sizeKey} {
        #{$type}-#{$direction}: $size * $spacing-base-size;
      }
    }
  }
}
